<template>
  <div class="navbar">
    <div class="left">
      <img alt="logo图标" src="@/assets/logo.png">
    </div>
    <div class="center">
      <van-search
          v-model="search_content"
          placeholder="请输入搜索关键词"
          shape="round"
      />
    </div>
    <div class="right">
      <img :src="userImg" alt="用户图标" @click="$router.push('/edit')">
      <van-button color="#ff6d99" size="normal"
                  style="margin: 0 10px;height: 32px;white-space: nowrap;overflow: hidden">下载APP
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Navbar',
  props: ['userImg'],
  data() {
    return {
      search_content: ''
    }
  }
}
</script>

<style scoped>
.navbar {
  display: flex;
  background-color: #fff;
}

.center {
  flex: 1;
}

.left {
  width: 25vw;
}

.right {
  width: 34vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right img {
  width: 8vw;
  height: 8vw;
}
</style>
